<template>
  <div class="quiz-index-wrapper" v-loading="isLoading">
    <header-row :baby="curBabyData" style="margin-top: 22px;" />
    <img :src="IMAGES.cover" />
    <p>{{ CONSTANTS.LABEL_NONINVOLVEDASSESSMENT }}</p>
    <p>{{ CONSTANTS.LABEL_NEEDCOMPLETEDASSESSMENT }}</p>
    <button-comp
      :text="CONSTANTS.LABEL_STARTASSESSMENT"
      :style="btnStyle"
      @click="onStart"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as CONSTANTS from '@/constants/index'
import HeaderRow from '@/components/HeaderRow'
import ALLIMAGES from '@/utils/images/index'
import ButtonComp from '@/components/ButtonComp'
import * as UTILS from '@/utils/index'
import QUESTIONS from '@/assets/quiz/index'

export default {
  props: {},
  components: { HeaderRow, ButtonComp },
  data() {
    return {
      CONSTANTS: Object.freeze(CONSTANTS),
      isLoading: false,
      btnStyle: {
        width: '83%',
        position: 'fixed',
        left: '50%',
        bottom: '22px',
        transform: 'translateX(-50%)',
      },
    }
  },
  computed: {
    ...mapGetters(['user']),
    IMAGES() {
      return ALLIMAGES.quiz
    },
    isDev() {
      return process.env.NODE_ENV === CONSTANTS.VAR_NODE_ENV_DEV
    },
    babyId() {
      if (!this.user) return null
      return this.user.currentBabyId
    },
    curBabyData() {
      if (!this.user) return null
      return this.user.currentBabyData
    },
    dateDuration() {
      if (!this.user) return 0
      return this.user.dateDuration
    },
    //获取对应的年龄段问题
    questions() {
      const dateDuration = this.dateDuration
      return QUESTIONS.find((item) => {
        const { min, max, questions } = item
        if (dateDuration < min) return false
        if (dateDuration > max) return false
        return true
      })
    },
  },
  mounted() {},
  filters: {},
  watch: {},
  methods: {
    onStart() {
      if (!this.questions) return this.$toast(CONSTANTS.LABEL_BABYAGE_OVERAGE)

      this.$store.commit(CONSTANTS.COMMIT_STORAGE_VUEXSTATE)
      this.$store.dispatch(CONSTANTS.DISPATCH_REDIRECT, {
        path: '/quiz/role',
        isRouter: true,
      })
    },
  },
}
</script>

<style lang="less" scoped>
.quiz-index-wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;

  & > div:first-of-type {
    width: 88%;
    margin: 0 auto;
  }

  & > img {
    margin: 0 auto;
    margin-top: 65px;
    width: 240px;
    height: 139px;
  }

  & > p {
    margin: 0;
    line-height: 13px;
    font-family: 'SourceHanSansCN-Regular';
    font-size: 13px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.5);
    text-align: center;
  }

  & > p:first-of-type {
    margin-top: 18px;
  }

  & > p:nth-of-type(2) {
    margin-top: 10px;
  }
}
</style>
